<template>
  <div class="main"
    :class="{
    deployPattern: isDeploy,
  }" @click="gridButton()">
    <!-- 第 1 排 -->
    <div class="gray" data-name="核酸检测点">核酸检测点</div>
    <div data-name="12" :class="{red: state[0].level == 'red' || templevel == '12', yellow: state[0].level == 'yellow'}"></div>
    <div data-name="13" :class="{red: state[1].level == 'red' || templevel == '13', yellow: state[1].level == 'yellow'}">居民楼</div>
    <div data-name="14" :class="{red: state[2].level == 'red' || templevel == '14', yellow: state[2].level == 'yellow'}"></div>
    <div class="hos gray" data-name="医院">医院</div>
    <!-- 第 2 排 -->
    <div data-name="21" :class="{red: state[3].level == 'red' || templevel == '21', yellow: state[3].level == 'yellow'}"></div>
    <div data-name="22" :class="{red: state[4].level == 'red' || templevel == '22', yellow: state[4].level == 'yellow'}"></div>
    <div data-name="23" :class="{red: state[5].level == 'red' || templevel == '23', yellow: state[5].level == 'yellow'}"></div>
    <div data-name="24" :class="{red: state[6].level == 'red' || templevel == '24', yellow: state[6].level == 'yellow'}"></div>
    
    <!-- 第 3 排 -->
    <div data-name="31" :class="{red: state[7].level == 'red' || templevel == '31', yellow: state[7].level == 'yellow'}"></div>
    <div data-name="32" :class="{red: state[8].level == 'red' || templevel == '32', yellow: state[8].level == 'yellow'}"></div>
    <div data-name="33" :class="{red: state[9].level == 'red' || templevel == '33', yellow: state[9].level == 'yellow'}"></div>
    <div data-name="34" :class="{red: state[10].level == 'red' || templevel == '34', yellow: state[10].level == 'yellow'}"></div>
    <div data-name="35" :class="{red: state[11].level == 'red' || templevel == '35', yellow: state[11].level == 'yellow'}"></div>
    <div data-name="36" :class="{red: state[12].level == 'red' || templevel == '36', yellow: state[12].level == 'yellow'}"></div>
    <!-- 第 4 排 -->
    <div data-name="41" :class="{red: state[13].level == 'red' || templevel == '41', yellow: state[13].level == 'yellow'}"></div>
    <div data-name="42" :class="{red: state[14].level == 'red' || templevel == '42', yellow: state[14].level == 'yellow'}">居民楼</div>
    <div data-name="43" :class="{red: state[15].level == 'red' || templevel == '43', yellow: state[15].level == 'yellow'}"></div>
    <div data-name="44" :class="{red: state[16].level == 'red' || templevel == '44', yellow: state[16].level == 'yellow'}">工厂</div>
    <div data-name="45" :class="{red: state[17].level == 'red' || templevel == '45', yellow: state[17].level == 'yellow'}"></div>
    <div class="mat gray" data-name="物资点">物资点</div>
    <!-- 第 5 排 -->
    <div class="gray" data-name="核酸检测点">核酸检测点</div>
    <div data-name="52" :class="{red: state[18].level == 'red' || templevel == '52', yellow: state[18].level == 'yellow'}"></div>
    <div data-name="53" :class="{red: state[19].level == 'red' || templevel == '53', yellow: state[19].level == 'yellow'}"></div>
    <div data-name="54" :class="{red: state[20].level == 'red' || templevel == '54', yellow: state[20].level == 'yellow'}"></div>
    <div data-name="55" :class="{red: state[21].level == 'red' || templevel == '55', yellow: state[21].level == 'yellow'}"></div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import VueEvent from '../../../common/event'

import stateData from './js/stateData'

const isDeploy = ref(false);
const state = reactive(stateData()) // 保留各方格状态
const templevel = ref('0') // 保留临时部署的状态
const redLevel = reactive([
  {
    name: '医院',
    time: '永远'
  }
]) // 存储红色地区信息

/**
 * 初始化状态
 */
for(let item of state) item.level = 'gray';

/**
 * 游戏方格被点击触发事件
 */
const gridButton = () => {
  // 部署开始前提下
  if(isDeploy.value == true) {
    templevel.value = event.target.dataset.name;
  }
}

const clickDeploy = () => {
  isDeploy.value = false; // 关闭部署模式
  // 如果有设置，添加红色地区信息
  if(templevel.value != '0' && templevel.value != '核酸检测点' && templevel.value != '医院' && templevel.value != '物资点') {
    redLevel.push({
      name: templevel.value,
      time: 0
    })
  }

  for(let item_rl of redLevel) {
    // 先根据红色地区，将周边黄色地区标注上
    for(let i = Number(item_rl.name) - 10; i <= Number(item_rl.name) + 10; i = i + 10) {
      for(let j = i - 1; j <= i + 1; j++) {
        for(let item of state) if(item.name == String(j) && item.level != 'red') item.level = 'yellow';
      }
    }
    // 再设置中心的颜色为红色
    for(let item_s of state) {
      if(item_s.name == item_rl.name) item_s.level = 'red';
    }
  }

  // 如果有设置，让救护车动画播放
  if(templevel.value != '0' && templevel.value != '核酸检测点' && templevel.value != '医院' && templevel.value != '物资点') {
    VueEvent.emit('ambulanceAnimaiton');
  }
  
  templevel.value = '0'; // 临时红色置初始
  VueEvent.emit('updateRedlevel', redLevel) // 将红色地区数据传给 scene_button 组件
}

/**
 * 兄弟组件通信相关（scene_button 发来的事件）
 */
VueEvent.on('changeDeploy', () => {
  isDeploy.value = true;
})

VueEvent.on('clickDeploy', () => {
  clickDeploy();
})

VueEvent.on('changeRedlevel', () => {
  // 先给每个红色地区持续时间 +1
  for(let i = 0; i < redLevel.length; i++) {
    if(redLevel[i].name != '医院') redLevel[i].time++;
    if(redLevel[i].time >= 2) {
      redLevel.splice(i, 1);
      i = i - 1;

      for(let item of state) {
        item.level = 'gray';
      }

      for(let item_rl of redLevel) {
        // 先根据红色地区，将周边黄色地区标注上
        for(let i = Number(item_rl.name) - 10; i <= Number(item_rl.name) + 10; i = i + 10) {
          for(let j = i - 1; j <= i + 1; j++) {
            for(let item of state) if(item.name == String(j) && item.level != 'red') item.level = 'yellow';
          }
        }
        // 再设置中心的颜色为红色
        for(let item_s of state) {
          if(item_s.name == item_rl.name) item_s.level = 'red';
        }
      }
    }    
  }
})
</script>

<style scoped>
  .main {
    width: 980px;
    height: 700px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 6px;

    position: relative;
    z-index: 5;

    animation: main-img 2s forwards ease;
  }

  @keyframes main-img {
    from {
      transform: rotateX(0) rotateY(5deg) rotateZ(-5deg);
    }
    to {
      transform: rotateX(50deg) rotateY(0) rotateZ(0);
    }
  }
  .main div {
    color: #fff;
    font-size: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    box-sizing: border-box;

    border: solid 1px #0002;
    border-radius: 4px;
    background-color: rgba(200, 200, 200, 0.3);
    box-shadow: 0 0 30px rgba(220, 220, 220, 0.1) inset, 0 0 10px rgba(200, 200, 200, 0.2);
  }

  .main div:hover {
    background-color: rgba(73, 225, 75, 0.35);
    border: solid 1px rgb(73, 225, 75);
    box-shadow: 0 0 30px rgba(182, 252, 183, 0.5) inset, 0 0 10px rgba(73, 225, 75, 0.6);
  }

  .main .hos {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 3;
  }

  .main .mat {
    grid-column-start: 6;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 6;
  }

  /* deployPattern 部署模式下的样式 */
  .main .yellow {
    background-color: rgba(250, 255, 30, 0.3);
    box-shadow: 0 0 30px rgba(250, 255, 30, 0.1) inset, 0 0 10px rgba(250, 255, 30, 0.2);
  }

  .main .yellow:hover {
    background-color: rgba(250, 255, 30, 0.3);
    box-shadow: 0 0 30px rgba(250, 255, 30, 0.1) inset, 0 0 10px rgba(250, 255, 30, 0.2);
    border: solid 1px rgb(250, 255, 30);
  }

  .main .red {
    background-color: rgba(255, 30, 30, 0.3);
    box-shadow: 0 0 30px rgba(255, 30, 30, 0.1) inset, 0 0 10px rgba(255, 30, 30, 0.2);
  }

  .main .red:hover {
    background-color: rgba(255, 30, 30, 0.3);
    box-shadow: 0 0 30px rgba(255, 30, 30, 0.1) inset, 0 0 10px rgba(255, 30, 30, 0.2);
    border: solid 1px rgb(255, 30, 30);
  }

  .deployPattern .gray {
    background-color: rgba(20, 20, 20, 0.3);
    box-shadow: 0 0 30px rgba(220, 220, 220, 0.1) inset, 0 0 10px rgba(200, 200, 200, 0.2);
  }

  .deployPattern .gray:hover {
    background-color: rgba(20, 20, 20, 0.3);
    box-shadow: 0 0 30px rgba(220, 220, 220, 0.1) inset, 0 0 10px rgba(200, 200, 200, 0.2);
    border: solid 1px rgb(20, 20, 20);
  }
</style>